<template>
	<view class="">
		<view v-for="(item,index) in list" :key="index" class="">
			<!-- 左文右图 -->
			<view v-if="item.format=='RIGHT'" @click="toPage(item)" class="box row">
				<view class="row-text">
					<view class="row-text-content">
						<view v-if="item.sticky == 1 && isPadding" class="">
							置顶
						</view>
						{{item.title}}
					</view>
					<view class="row-text-time">
						{{item.pubDate}} · {{item.viewNum || 0}}次浏览
					</view>
				</view>
				<view class="row-img" style="margin-left: 20rpx;">
					<image :src="item.picture" mode=""></image>
				</view>
			</view>
			<!-- 左图右文 -->
			<view v-if="item.format=='LEFT'" @click="toPage(item)" class="box row">
				<view class="row-img" style="margin-right: 20rpx;">
					<image :src="item.picture" mode=""></image>
				</view>
				<view class="row-text">
					<view class="row-text-content">
						<view v-if="item.sticky == 1 && isPadding" class="">
							置顶
						</view>
						{{item.title}}
					</view>
					<view class="row-text-time">
						{{item.pubDate}} · {{item.viewNum || 0}}次浏览
					</view>
				</view>
			</view>
			<!-- 上图下文 -->
			<view v-if="item.format=='TOP'" @click="toPage(item)" class="box column">
				<view class="column-img">
					<image :src="item.picture" mode=""></image>
				</view>
				<view class="column-view">
					<view class="column-view-title">
						<view v-if="item.sticky == 1 && isPadding" class="">
							置顶
						</view>
						{{item.title}}
					</view>
					<view class="column-view-time">
						{{item.pubDate}} · {{item.viewNum || 0}}次浏览
					</view>
				</view>
			</view>
			<!-- 上文下图 -->
			<view v-if="item.format=='BOTTOM'" @click="toPage(item)" class="box column">
				<view class="column-view">
					<view class="column-view-title">
						<view v-if="item.sticky == 1 && isPadding" class="">
							置顶
						</view>
						{{item.title}}
					</view>
					<view class="column-view-time">
						{{item.pubDate}} · {{item.viewNum || 0}}次浏览
					</view>
				</view>
				<view class="column-img">
					<image :src="item.picture" mode=""></image>
				</view>
			</view>
			<!-- 纯文本 -->
			<view v-if="item.format=='TEXT'" @click="toPage(item)" class="box column">
				<view class="column-view">
					<view class="column-view-title">
						<view v-if="item.sticky == 1 && isPadding" class="">
							置顶
						</view>
						{{item.title}}
					</view>
					<view class="column-view-time">
						{{item.pubDate}} · {{item.viewNum || 0}}次浏览
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTypeList,
		getList
	} from "@/api/news/index.js"
	export default {
		props:{
			isPadding:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				list: []
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				getList({
					page: 1,
					limit: 3,
					sticky: 1,
					typeCode: '',
				}).then(res => {
					this.list = res.rows
				})
			},
			toPage(item) {
				uni.navigateTo({
					url: `/pages/news/detail/index?id=${item.id}`
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.box {
		width: 718rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		box-sizing: border-box;
		margin: 0 auto 20rpx;
	}

	image {
		background: #ffe359;
	}

	.row {
		display: flex;
		padding: 24rpx;

		.row-text {
			flex: 1;
			display: flex;
			flex-direction: column;

			.row-text-content {
				display: inline-block;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: var(--h1Color);
				line-height: 48rpx;

				view {
					display: inline-block;
					width: 68rpx;
					border-radius: 4rpx;
					border: 1rpx solid var(--statusBg4);
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: var(--statusBg4);
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
				}
			}

			.row-text-time {
				margin-top: 12rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: var(--h4Color);
				line-height: 30rpx;
			}
		}

		.row-img {
			width: 230rpx;
			height: 152rpx;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.column {
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.column-img {
			width: 100%;
			height: 320rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.column-view {
			width: 100%;
			padding: 24rpx;
			box-sizing: border-box;

			.column-view-title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: var(--h1Color);
				line-height: 48rpx;
				display: inline-block;
				view{
					display: inline-block;
					width: 68rpx;
					border-radius: 4rpx;
					border: 1rpx solid var(--statusBg4);
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: var(--statusBg4);
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
				}
			}

			.column-view-time {
				margin-top: 12rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: var(--h4Color);
				line-height: 30rpx;
			}
		}
	}
</style>